import React from 'react';

import { Progress,LocaleProvider,Modal,Row,Col,Badge } from 'antd';

import zh_CN from 'antd/lib/locale-provider/zh_CN';

import { ajax,ajaxSubmit} from '../common';

export default class StartJobModla extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            progress: 0,
            showModal: false,
            jobMessage: '',
            status : '',
            progressStatus : '',
            task : '',
        }

        this.initValue = 0;

        this.checkInterval = 1000;

        if (props.initValue) {
            this.initValue = props.initValue;
        }

        if (props.checkInterval) {
            this.checkInterval = props.checkInterval;
        }
    }

    start = (startParams,message) => {
        this.setState({ showModal: true, progress: 0, jobMessage: message !== undefined ? message : '任务正在启动，请等待...',progressStatus : 'active' ,status : 'processing'});

        const { checkInterval, initValue } = this;

        const intervalId = setInterval(() => {

            ajax(this.props.checkJobUrl, this.props.checkJobParamData, (data) => {
                const progress = data.progress;
                const progressMessage = data.progressMessage !== undefined ? data.progressMessage : '任务正在进行中，请等待...';
                const task = data.task !== undefined ? data.task : '';
                const style = data.progressStyle;
                console.log(data);
                const states = {
                    jobMessage: progressMessage,
                    progress: progress,
                    task : task,
                }

                this.setState(states);

            });

        }, checkInterval);

        ajax(this.props.startJobUrl,{...this.props.startJobParamData,...startParams},(data) => {
            console.log(data);
            if(data.finished === true){
                window.clearInterval(intervalId);
                if(data.success === true){
                    this.close();
                    if (this.props.onJobFinish) {
                        setTimeout(() => {
                            this.props.onJobFinish(data);
                        }, 0);
                    }
                }
                else{
                    this.setState({jobMessage : data.message,status : 'error',progressStatus : 'exception'});
                }
            }
            
        });
       
    }

    close = () => {
        this.setState({ showModal: false });
    }

    render() {
        return (
            <LocaleProvider locale={zh_CN}>
                <Modal destroyOnClose={true}
                    title={this.props.title}
                    width={this.props.width}
                    bodyStyle={{ padding: 5 }}
                    visible={this.state.showModal}
                    onCancel={this.close}
                    afterClose={this.props.afterClose}
                    maskClosable={false}
                    closable={this.props.closable !== undefined ? this.props.closable : false}
                    footer={<Badge status={this.state.status} text={this.state.task + ' ' +  this.state.jobMessage} />}
                >
                    <Row gutter={8}>
                        <Col span={24} style={{marginBottom : 8 ,  marginTop: 8,marginLeft : 3,marginRight : 20 }}>
                            <Progress percent={this.state.progress} status="active" showInfo={this.props.showInfo !== undefined ? this.props.showInfo : true}/>
                        </Col>
                    </Row>
                </Modal>
            </LocaleProvider>
        );
    }
}
